<template>
  <div class="swiper-plugin">
    <em-swipe
      :autoplay="autoplay"
      indicator-color="white"
      :ratio="ratio"
      gutter="20px"
      :radius="radius"
    >
      <em-swipe-item
        v-for="(image,index) in images"
        :key="index"
      >
        <em-image
          v-if="image.thumb"
          :src="image.thumb"
          fit="cover"
          width="100%"
          height="100%"
        />
        <span v-else>{{ index }} - {{ image.title || ratioText }}</span>
      </em-swipe-item>
    </em-swipe>
  </div>
</template>

<script>
export default {
  name: 'Swiper',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  computed: {
    options() {
      return this.value
    },
    setting() {
      if (this.options && this.options.setting) {
        return this.options.setting
      }
      return null
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    autoplay() {
      if (this.setting && this.setting.autoplay) {
        return 1000 * 5
      }
      return 0
    },
    ratio() {
      if (this.styles) {
        if (this.styles.ratio) {
          return this.styles.ratio
        }
        var width = this.styles.width || 750
        var height = this.styles.height || 0
        if (!/^\d+$/.test(height)) {
          height = Number(height.replace(/[^0-9]/gi, ''))
        }
        if (height > 0) {
          return width / height
        }
      }
      return 15 / 7
    },
    radius() {
      console.log(this.styles.radius)
      if (this.styles && this.styles.radius) {
        return this.styles.radius
      }
      return 0
    },
    ratioText() {
      var width = 750
      var height = 350
      if (this.ratio) {
        const ratio = Math.abs(this.ratio)
        if (ratio !== 0) {
          height = (width / ratio).toFixed()
        }
      }
      return `${width} * ${height}`
    },
    mockSize() {
      if (this.setting && this.setting.mockItems) {
        return this.setting.mockItems
      }
      return 0
    },
    images() {
      var items = this.options && this.options.items
      if (items.length > 0) {
        return items
      }
      for (var i = 0; i < this.mockSize; i++) {
        items.push({
          thumb: '',
          title: ''
        })
      }
      return items
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-plugin {
}
</style>
